<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03_元素属性操作</title>
		<!--
			元素属性操作：针对固定属性、附加属性操作  
		     元素  固定属性---清楚:元素是否可用属性【w3c元素出现设置属性】
		          附加属性---表单为主，附加属性cheked、disabled...
			prop()        ---功能与attr类似，附加属性，针对表单，默认选中
			removeprop()  ---功能与removeAttr类似，附加属性，针对表单，移除选中功能  
				  
				  -->
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>prop()和removeProp()函数使用</h1>
		<!-- 复选框，默认选中 id="myCheckBox"
		     三个按钮   id="getProBtn"    获取属性
			           id="setProBtn"    设置属性
					   id="removeProBtn" 移除属性
			弹出显示文字：div id="output"		   
		 -->
		 <input type="checkbox"  id="myCheckBox"/>
		 <button id="getProBtn">获取属性</button>
		 <button id="setProBtn">设置属性</button>
		 <button id="removeProBtn">移除属性</button>
		 <div id="output"></div>
		 <script>
			 /* prop()  点击--获取属性--打印复选框的值
			                           复选框的值是：+变量
				prop("checked",)--input元素--checked属性--属性值bool[true,false]					   
			 */
			$("#getProBtn").click(function(){
				//prop()获取元素的附加属性--input中checked
			var isChecked=$("#myCheckBox").prop("checked");
			$("#output").text("复选框的值是:"+isChecked);
			});
			//prop("checked",false) 取消选中
			$("#setProBtn").click(function(){
				//prop()获取元素的附加属性--input中checked
			$("#myCheckBox").prop("checked",false);
			$("#output").text("复选框的值是:false");
			});
			//removeProp("checked")  取消选中--删除 checked属性
			$("#removeProBtn").click(function(){
			$("#myCheckBox").removeProp("checked");
			$("#output").text("复选框的属性已经移除~")
			});
		</script>
	</body>
</html>